<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
        <link rel="stylesheet" href="./css/x-admin.css" media="all">
    </head>
    <body>
       <!-- 顶部 -->
	<!--
        	作者：offline
        	时间：2019-12-31
        	描述：添加div
        -->
        <!-- 角色设置权限 -->
		<div id="testtree" style="display: none;" class="demo-tree-more">
		</div>
	<div id="addDiv" style="display: none; margin-left: 10px;">
		<form id="addForm" class="layui-form" action="" method="post"
			onsubmit="return false;">
			<div class="layui-form-item">
				<label class="layui-form-mid">角色姓名：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" name="rname"
						lay-verify="required|rname" />
				</div>
			</div>

			<div class="layui-form-item" style="text-align: center;">
				<button id="addBtn" class="layui-btn">添加</button>
			</div>
		</form>
	</div>

	<!--
        	作者：offline
        	时间：2019-12-31
        	描述：修改div
        -->
	<div id="updateDiv" style="display: none; margin-left: 10px;">
		<form id="updateForm" lay-filter="updateForm" class="layui-form"
			action="" method="post" onsubmit="return false;">
			<div class="layui-form-item">
				<label class="layui-form-mid">角色名稱：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input class="layui-input" type="hidden" name="rname" /> <input
						class="layui-input" name="rname"
						lay-verify="required|rname" />
				</div>
			</div>

			<div class="layui-form-item" style="text-align: center;">
				<button id="updateBtn" class="layui-btn">修改</button>
			</div>
		</form>
	</div>

	<!--
        	作者：offline
        	时间：2019-12-31
        	描述：头部按钮
        -->
	<script type="text/html" id="top">
			<button class="layui-btn" lay-event="add">添加角色</button> 
		</script>
	<!--
        	作者：offline
        	时间：2019-12-31
        	描述：右侧按钮
        -->
	<script type="text/html" id="rightBar">
			<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="role">设置权限</button> 
			<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">修改</button> 
			<button class="layui-btn" lay-event="del">删除</button> 
		</script>


	<table id="demo" class="layui-hide" lay-filter="tfil"></table>


	<script type="text/javascript">
		layui.use([ 'table', 'layer', 'form', 'laydate','tree','util' ], function() {
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var tree =layui.tree;
			var $ = layui.$;
			var laydate = layui.laydate;
			var util = layui.util;

			table.render({
				elem : "#demo",
				url : "getAl",
				page : true,
				toolbar : '#top',
				cols : [ [ {
					field : "rid",
					title : "用户组编号"
				}, {
					field : "rname",
					title : "角色名"
				}, {
					title : "操作",
					toolbar : "#rightBar"
				} ] ],
				id : "tab"
			})
			active = {
				reload : function() {
					var student_name = $("#student_name").val();
					var mid = $("#a").val();
					table.reload("tab", {
						where : {
							"student_name" : student_name,
							"mid" : mid
						}
					})
				}
			}
			$("#search").click(function() {
				active.reload();
			})
			//添加监听
			table.on("toolbar(tfil)", function(obj) {
				if (obj.event == "add") {
					layer.open({
						type : 1,
						title : '添加',
						content : $("#addDiv"),
						area : [ '550px', '600px' ]
					})
				}
			});

			$("#addBtn").click(function() {
				$.post("", $("#addForm").serialize(), function(res) {
					if (res = "1") {
						layer.msg("sucess");
						layer.closeAll();
						active.reload();
					}
				}, "text")
			})

			//修改监听
			table.on("tool(tfil)", function(obj) {
				if (obj.event == "update") {
					form.val("updateForm", obj.data);
					layer.open({
						type : 1,
						title : '修改',
						content : $("#updateDiv"),
						area : [ '550px', '600px' ]
					})
				} else if (obj.event == "del") {

					$.post("", {
						studentid : obj.data.studentid
					}, function(res) {
						if (res = "1") {
							layer.msg("sucess");
							layer.closeAll();
							active.reload();
						}
					}, "text");
				}else if(obj.event=="role"){
					layer.open({
						type:1,
						title:'权限管理',
						content:$("#testtree"),
						area:['550px','600px']
					})
					$.ajax({
						url: "findPermissions",
						data:{id:obj.data.rid},
						success: function(obj3) {
							var treeId=tree.render({
								elem:'#testtree', 
								data: obj3,
								edit: ['add', 'update', 'del'], //操作节点的图标
							    click: function(obj2){
							      layer.msg(JSON.stringify(obj2.data));
							    },
							    id:'treeId',
								showCheckbox: true,
								accordion: true,
								oncheck: function(obj2){
									/* if (obj2.data.checked=true) {
										alert(2);
									} */
									//alert(JSON.stringify(checkData));
									$.ajax({
										url : "updatePer",
										data: {da:obj.data.rid,xiao:JSON.stringify(obj2.data.id)},
										dataType:"json",
										success : function(result) {
											layer.alert(result);
											active.reload();
										}
									});
								},
								click: function(obj){
							      var data = obj.data;  //获取当前点击的节点数据
							      layer.msg('状态：'+ obj.state + '<br>节点数据'+ JSON.stringify(data));
							   	},
								operate: function(obj){
								    var type = obj.type; //得到操作类型：add、edit、del
								    var data = obj.data; //得到当前节点的数据
								    var elem = obj.elem; //得到当前节点元素
								    
								    //Ajax 操作
								    var id = data.id; //得到节点索引
								    if(type === 'add'){ //增加节点
								      //alert(JSON.stringify(obj.data));
								      return 123;
								    } else if(type ==='update'){ //修改节点
								      console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
								    } else if(type === 'del'){ //删除节点
								      
								    };
								}
							});
			
						}
					})
					
				}
			});

		
			$("#updateBtn").click(
					function() {
						$.post("", $("#updateForm").serialize(),
								function(res) {
									if (res = "1") {
										layer.msg("sucess");
										layer.closeAll();
										active.reload();
									}
								}, "text")
					})

		})
	</script>
    </body>
</html>